<template>
	<view>
		<image @click="musicClick" :class="music?'mactive':''" style="position: fixed; z-index: 333; top: 10px; right: 10px; width: 40px; height: 40px;" src="/static/music.png"></image>
		<!-- {{width}} -->
		<!-- <image src="http://img95.699pic.com/for_360_sitemap_imgs/003/00/53/64/57.jpg"></image> -->
		<!-- <canvas :style="{width:width+'px', height:height+'px'}" canvas-id="firstCanvas" id="firstCanvas"></canvas> -->
		<!-- v-if="detail.y" -->
		<!-- @touchstart="handleTouchstart" @touchend="handleTouchend" -->
		<view style="width: 100%;height:auto;overflow: hidden;"   >
			
					 <view class="imgOut" 
					 ref="backTop" 
					 style="transition: all 0.3s;"
					 :style="{width:width, 'margin-left':left+'px','margin-top':top+'px'}"
					 >
					 <!-- <canvas style="transition: all 0.3s;" @click="tag" :style="{width:width+'px', height:height+'px'}" canvas-id="firstCanvas" id="firstCanvas"></canvas> -->
						<!-- <image @click="tag" :src="detail.image"
						 mode="widthFix" :style="{width:width}"></image> -->
						 <image @click="tag" :src="detail.image" mode="aspectFill" style="width: 750rpx;height: 100vh;"></image>
						  <view class="tag" style="top: 10px; left: 10px;" @click="goJieshao">
							<view class="title">{{detail.name}}</view>
							<view class="liang">挂锁量：{{detail.lock}}</view>
						  </view>
						  <view class="blue" 
						  v-if="i.type === 1"
							v-for="i in detail.mountains_detail"
						   :style="{'top': i.y.indexOf('-') !== -1 ? i.y.split('-')[0] + 'px' : i.y + 'px',
						   'left': i.x.indexOf('-') !== -1 ? i.x.split('-')[0] + 'px' : i.x + 'px'}"
						   :key="i.id"
						   :class="i.is_self === 1 ? 'myTag' : ''"
						   >
						  </view>
						  <view class="orange"
						  v-if="i.type === 0 && i.sex === 0"
						  	v-for="i in detail.mountains_detail"
						   :style="{'top': i.y.indexOf('-') !== -1 ? i.y.split('-')[0] + 'px' : i.y + 'px',
						   'left': i.x.indexOf('-') !== -1 ? i.x.split('-')[0] + 'px' : i.x + 'px'}"
						   :key="i.id"
						    :class="i.is_self === 1 ? 'myTag' : ''"
							@click.stop="showInfo(i)"
						   >
						  </view>
						  <view class="yaoshi"
						  v-if="i.type === 0 && i.sex === 1"
						  	v-for="i in detail.mountains_detail"
						   :style="{'top': i.y.indexOf('-') !== -1 ? i.y.split('-')[0] + 'px' : i.y + 'px',
						   'left': i.x.indexOf('-') !== -1 ? i.x.split('-')[0] + 'px' : i.x + 'px'}"
						   :key="i.id"
						    :class="i.is_self === 1 ? 'myTag' : ''"
							@click.stop="showInfo(i)"
						   >
						  </view>
						  <view class="tagOut"
						  
						  v-if="showTag"
						  :style="{'top': tagTop + 'px', 'left': tagLeft + 'px'}">
						  <image :class="classname==0?'class1':'class2'" style="width: 100%;" src="../../static/images/wish/bg.png" mode="widthFix"></image>
						  <view style="position: absolute; width: 100%; height: 100%; left: 0; top: 0; z-index: 1;">
							  
						  	<view class="userRow">
						  		<image :src="user.avatar" mode="" class="avatar"></image>
						  		<text>{{user.nickname}}</text>
								<u-icon :color="user.gender === 0?'red':'#EA9B37'" class="sexIcon" :name="user.gender === 0?'woman':'man'"></u-icon>
						  		<!-- <image src="../../static/images/wish/sex.png" mode="" class="sexIcon" 
						  		v-if="user.gender === 0"></image>
								<image src="../../static/images/wish/nan.png" mode="" class="sexIcon"
								v-if="user.gender === 1"></image> -->
						  	</view>
						  	<view class="jiesuo">
						  		<image src="../../static/images/wish/glayyaoshi.png" mode="" class="yaosi"></image>
						  		<view class="userRight">请用权益解锁</view>
						  		<view class="jieRouk" @click="jiesuo()" 
						  		v-if="currentTag.is_unlock === 0">解锁</view>
						  	</view>
						  	<view class="gn">
						  		<view class="gnIn" @click="chat()">聊一聊</view>
						  		<view class="gnIn" @click="lookInfo()">看情况</view>
						  	</view>
						  </view>
					 </view>
					  </view>
					 
		 </view>
			
		
		<articleList v-if="detail.push" :list="detail.push"></articleList>
		
		<view style=" width: 100%; height: 50px;position: fixed; display: flex;align-items: center; z-index: 1; bottom: 0; left: 0;">
			<view style="flex: 1;text-align: center;">
				<u-button @click="xuyuan" size="medium" type="warning">许愿</u-button>
			</view>
			<view style="flex: 1;text-align: center;">
				<u-button size="medium" type="warning" @click="xunyuans()">寻缘</u-button>
			</view>
			
			<view style="flex: 1;text-align: center;">
				<u-button size="medium" type="warning" @click="sm">算命</u-button>
			</view>
			
		</view>
		<view v-if="show" style="position: fixed;z-index: 111;width:300px ; height: auto; background: #fff; top: 50%; left: 50%; transform:translate(-50%,-50%); border-radius: 14px; text-align:center">
			<view style="line-height: 50px;">
				{{title}}
			</view>
			<view style="line-height: 40px;">
				{{content}}
			</view>
			<view style="display: flex; text-align: center; margin-top: 10px; line-height: 50px;">
				<view style="width: 50%;" @click="xunyuanOrder">
					确定
				</view>
				<view style="width: 50%;" @click="qx">
					取消
				</view>
			</view>
		</view>
		<u-modal v-model="xyshow" content="挂锁成功"></u-modal>
		<!-- <u-modal v-model="show"
		:title="title" :content="content" :showCancelButton="true"
		@confirm="xunyuanOrder"
		></u-modal> -->
		
	</view>
</template>

<script>  
const innerAudioContext = uni.createInnerAudioContext();
				innerAudioContext.src = '/static/qrs.mp3';
				innerAudioContext.loop=true;
				// innerAudioContext.autoplay = true;
	const { windowWidth, windowHeight } = uni.getSystemInfoSync()
	import articleList from '@/components/article/list.vue';
	import {mountainDetail, xunyuan, userInfo, jsQy} from './request.js'
	export default {
		components: {
			articleList,
		},
		data() {
			return {
				classname:0,
				music:true,
				xyshow:false,
				left:0,
				width:'100%',
				// height:0,
				list:[],
				id: '',
				x: 0,
				y: 0,
				detail: {},
				xuyuans: false,
				xunyuan: false,
				show: false,
				title: '寻缘',
				content: '',
				clickX: 0,
				clickY: 0,
				tagTop: 0,
				tagLeft: 0,
				startX:0,
				startY:0,
				left:0,
				top:0,
				showTag: false,
				user: {},
				background: {
					backgroundColor: 'rgba(244,160,99,1)',
				},
				currentTag: {},
				imgUrl: ''
			}
		},
		onReady() {
			// let w_h=new Promise((r,n)=>{
			// 	uni.getImageInfo({
			// 	        src: "https://p0.ssl.qhimgs1.com/sdr/400__/t0154338114a1484a4e.jpg",
			// 	        success: (res) => {
			// 	          // resolve(res);
			// 			  console.log(res)
			// 	        },
			// 	        fail: (err) => {
			// 	          // reject(err);
			// 	        }
			// 	});
			// })
			
		},
		mounted() {
			
		},
		onShow() {
			// this.width = uni.getSystemInfoSync().screenWidth
			// this.height = uni.getSystemInfoSync().screenHeight
			this.xunyuan = false
			this.xuyuans = false
			this.getDetail()
			
			if(this.music){
				this.musicplay()
			}
		},
		onLoad(option) {
			// this.detail=JSON.parse(item)
			this.id = option.id
			this.imgUrl = option.imgUrl
		},
		onNavigationBarButtonTap() {
			this.tipMap(this.detail.lat,this.detail.lng,this.detail.name)
		},
		onBackPress() {
			console.log('页面离开')
			innerAudioContext.pause()
		},
		methods: {
			sm(){
				uni.navigateTo({
					url:'./suanming'
				})
			},
			goJieshao(){
				console.log('介绍123456')
				uni.navigateTo({
					url:'/pages/wish/shanJieShao?id='+this.id
				})
			},
			musicplay(){
				console.log(this.music)
				if(this.music){
					innerAudioContext.play()
				}else{
					innerAudioContext.pause()
				}
			},
			musicClick(){
				this.music=!this.music
				this.musicplay()
			},
			qx(){
				this.show=false
			},
			 //屏幕滑动
			 //手指按下屏幕
			 handleTouchstart(event){
			  // this.startTime = Date.now()
			  this.startX = event.changedTouches[0].clientX
			  this.startY = event.changedTouches[0].clientY
			  // console.log(this.startX,'this.startX')
			},
			//手指离开屏幕
			handleTouchend(event){
			  // const endTime = Date.now()
			  const endX = event.changedTouches[0].clientX
			  const endY = event.changedTouches[0].clientY
			  //判断按下的时长
			  // if(endTime - this.startTime >2000){
			  //   return
			  // }
			  //滑动的方向
			  let direction = endX -this.startX >0?"right":"left";
			  console.log(this.left+(parseInt(endX -this.startX)),this.width)
			  // if((endX -this.startX)<=0){
				 //   this.left=this.left+(endX -this.startX)
			  // }
			  if(this.left+(parseInt(endX -this.startX))<=0&&this.left+(parseInt(endX -this.startX))>=(-(this.width-windowWidth))){
				  this.left=this.left+(endX -this.startX)
			  }
			  // if((endY-this.startY)<=0){
				 //  this.top=this.top+(endY-this.startY)
			  // }
			  if(this.top+(parseInt(endY-this.startY))<=0){
			  		this.top=this.top+(endY-this.startY)
			  }
			},

			
			// 跳转第三方地图
			//打开第三方地图
			//打开第三方地图
			tipMap(latitude, longitude, name) {
				let url = "";
				if (plus.os.name == "Android") { //判断是安卓端
					plus.nativeUI.actionSheet({ //选择菜单
						title: "选择地图应用",
						cancel: "取消",
						buttons: [{
							title: "腾讯地图"
						}, {
							title: "百度地图"
						}, {
							title: "高德地图"
						}]
					}, function(e) {
						switch (e.index) {
							//下面是拼接url,不同系统以及不同地图都有不同的拼接字段
							case 1:
								//注意referer=xxx的xxx替换成你在腾讯地图开发平台申请的key
								url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
								break;
							case 2:
								url =
									`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&coord_type=gcj02&src=andr.baidu.openAPIdemo`;
								break;
							case 3:
								url = `androidamap://viewMap?sourceApplication=appname&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								break;
							default:
								break;
						}
						if (url != "") {
							url = encodeURI(url);
							//plus.runtime.openURL(url,function(e){})调起手机APP应用
							plus.runtime.openURL(url, function(e) {
								plus.nativeUI.alert("本机未安装指定的地图应用");
							});
						}
					})
				} else {
					// iOS上获取本机是否安装了百度高德地图，需要在manifest里配置
					// 在manifest.json文件app-plus->distribute->apple->urlschemewhitelist节点下添加
					//（如urlschemewhitelist:["iosamap","baidumap"]）  
					plus.nativeUI.actionSheet({
						title: "选择地图应用",
						cancel: "取消",
						buttons: [{
							title: "腾讯地图"
						}, {
							title: "百度地图"
						}, {
							title: "高德地图"
						}]
					}, function(e) {
						switch (e.index) {
							case 1:
								url = `qqmap://map/geocoder?coord=${latitude},${longitude}&referer=xxx`;
								break;
							case 2:
								url =
									`baidumap://map/marker?location=${latitude},${longitude}&title=${name}&content=${name}&src=ios.baidu.openAPIdemo&coord_type=gcj02`;
								break;
							case 3:
								url =
									`iosamap://viewMap?sourceApplication=applicationName&poiname=${name}&lat=${latitude}&lon=${longitude}&dev=0`;
								break;
							default:
								break;
						}
						if (url != "") {
							url = encodeURI(url);
							plus.runtime.openURL(url, function(e) {
								plus.nativeUI.alert("本机未安装指定的地图应用");
							});
						}
					})
				}
			},
			

			

			// 许愿
			xuyuan(){
				this.xuyuans = true
				this.xunyuan = false
				// uni.showToast({
				// 	title: '请在图中选择要挂锁的位置',
				// 	icon: 'none',
				// 	duration: 2000
				// })
				// console.log('22222')
				uni.setNavigationBarTitle({
					title:'许愿'
				})
			},
			// 点击整个山地
			tag (e) {
				// console.log(e.detail.x,e.detail.y,this.top,this.left)
				// console.log(e.detail.x+(-this.top))
				this.clickX = e.detail.x+(-this.left)
				this.clickY = e.detail.y+(-this.top)
				console.log(this.clickX,this.clickY)
				if (this.xuyuans) {
					uni.navigateTo({
						url:`./xunyuan?id=${this.id}&x=${this.clickX}&y=${this.clickY}`
					})
				}
				if (this.xunyuan) {
					
					let data = {
						user_id: uni.getStorageSync('userdata').id
					}
					userInfo(data).then(res => {
						console.log(res)
						if (res.data.code === 1) {
							this.show = true
							this.content = `权益：剩余${res.data.data.rights}\n是否进行寻缘？`
						}
					})
					
				}
				this.showTag = false
			},
			// 获取山地详情
			getDetail () {
				
				mountainDetail(this.id).then(res => {
					console.log(res)
					if (res.data.code === 1) {
						console.log(res.data.data,'res.data.data')
						this.detail = res.data.data
						const ctx = uni.createCanvasContext('firstCanvas',this)
						uni.getImageInfo({
							src:res.data.data.image,
							success:(e)=>{
								console.log(e.width,e.height,'22222222222222')
								console.log(e,'计算宽高比例')
								this.width=e.width
								this.height=e.height
								// 计算宽高比例
								// that.ratio=data[0]/e.width
								// console.log(that.ratio)
								ctx.drawImage(e.path,0,0,e.width,e.height)
								
								ctx.draw(true)		
							},
							fail(err){
								console.log(err)
							}
						})
						
					}
				})
			},
			// 寻缘提示
			xunyuans () {
				this.xunyuan = true
				this.xuyuans = false
				// uni.showToast({
				// 	title: '请在图中选择要挂锁的位置',
				// 	icon: 'none',
				// 	duration: 2000
				// })
				uni.setNavigationBarTitle({
					title:'寻缘'
				})
			},
			// 寻缘
			xunyuanOrder () {
				let params = {
					mountains_id: this.id,
					x: this.clickX,
					y: this.clickY,
					screen_size: `${this.width}-${this.height}`
				}
				xunyuan(params).then(res => {
					console.log(res,'寻缘成功')
					if (res.data.code == 1) {
						this.show=false
						this.getDetail()
						this.xyshow=true
						// uni.showToast({
						// 	title: '寻缘成功！',
						// 	icon: 'success',
						// 	duration: 2000
						// })
					}
				})
			},
			// 展示点击详情的弹窗
			showInfo (obj) {
				// screenWidth
				console.log(obj,parseInt(obj.x)-180,'ssssssss')
				// uni.showToast({
				// 	title:obj.y,
				// 	icon: 'none',
				// 	duration: 2000
				// })
				uni.getSystemInfo({
				    success:(res)=> {
						this.currentTag = obj
						this.classname=(res.windowWidth-parseInt(obj.x)-180)<0?1:0
						console.log(this.classname)
						if (obj.is_self === 1) {
							this.tagTop = obj.y - 100
							this.tagLeft = (res.windowWidth-parseInt(obj.x)-180)<0?parseInt(obj.x)-170:obj.x
						} else {
							this.tagTop = obj.y - 95
							this.tagLeft = (res.windowWidth-parseInt(obj.x)-180)<0?parseInt(obj.x)-170:obj.x
							this.showTag = true
						}
						let params = {
							user_id: obj.user_id
						}
						userInfo(params).then(res => {
							// console.log(res)
							if (res.data.code === 1) {
								this.user = res.data.data
							}
						})
				    }
				});
				
			},
			// 聊一聊
			chat () {
				if (this.currentTag.is_unlock === 1) {
					console.log('进入')
					uni.navigateTo({
						url: `/pages/TUI-Chat/chat?conversationID=C2C${this.user.id}`
					})
				} else {
					uni.showToast({
						title: '请先解锁！',
						icon: 'none',
						duration: 2000
					})
				}
			},
			// 看情况
			lookInfo () {
				if (this.currentTag.is_unlock === 1) {
					console.log('进入')
					uni.navigateTo({
						url: `/pages/user/info?uid=${this.user.id}`
					})
				} else {
					uni.showToast({
						title: '请先解锁！',
						icon: 'none',
						duration: 2000
					})
				}
			},
			// 解锁权益
			jiesuo () {
				let params = {
					uid: this.currentTag.user_id
				}
				jsQy(params).then(res => {
					console.log(res)
					if (res.data.code === 1) {
						uni.showToast({
							title: '解锁成功！',
							icon: 'success',
							duration: 2000
						})
						this.currentTag.is_unlock = 1
						let params = {
							user_id: this.currentTag.user_id
						}
						userInfo(params).then(res => {
							console.log(res)
							if (res.data.code === 1) {
								this.user = res.data.data
							}
						})
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						})
					}
				})
			}
			// click(e){
			// 	uni.navigateTo({
			// 		url:'./wishDetail'
			// 	})
			// }
		}
	}
</script>

<style>
	.class2{
		transform:rotateX(360deg) rotateY(180deg)
	}
	.class1{
		/* transform:rotateX(180deg) rotateY(180deg) */
	}
	.mactive{
		 -webkit-transition-property: -webkit-transform;
		    -webkit-transition-duration: 1s;
		    -moz-transition-property: -moz-transform;
		    -moz-transition-duration: 1s;
		    -webkit-animation: rotate 3s linear infinite;
		    -moz-animation: rotate 3s linear infinite;
		    -o-animation: rotate 3s linear infinite;
		    animation: rotate 3s linear infinite;
	}
	@-webkit-keyframes rotate{from{-webkit-transform: rotate(0deg)}
	    to{-webkit-transform: rotate(360deg)}
	}
	@-moz-keyframes rotate{from{-moz-transform: rotate(0deg)}
	    to{-moz-transform: rotate(359deg)}
	}
	@-o-keyframes rotate{from{-o-transform: rotate(0deg)}
	    to{-o-transform: rotate(359deg)}
	}
	@keyframes rotate{from{transform: rotate(0deg)}
	    to{transform: rotate(359deg)}
	}
	.status_bar {
		height: var(--status-bar-height);
		width: 100%;
	}
.imgOut{
	position: relative;
}
.tag{
	position: absolute;
	width: 293rpx;
	min-height: 163rpx;
	z-index: 99;
	color: #FA9700;
	font-size: 30rpx;
	background-color: rgba(250, 250, 250, 0.65);
	text-align: center;
	border-radius: 20rpx;
}
.title{
	color: #FA9700;
	font-size: 36rpx;
	line-height: 82rpx;
}
.liang{
	color: #FA9700;
	font-size: 30rpx;
}
.suoTag{
	position: absolute;
	width: 60rpx;
	height: 60rpx;
	border-radius: 50%;
	background-color: #FA6000;
}
.blue{
	position: absolute;
	width: 68rpx;
	height: 90rpx;
	background: url(../../static/images/wish/blue.png) no-repeat;
	background-size: 100% 100%;
}
.orange{
	position: absolute;
	width: 68rpx;
	height: 90rpx;
	background: url(../../static/images/wish/orange.png) no-repeat;
	background-size: 100% 100%;
}
.yaoshi{
	position: absolute;
	width: 68rpx;
	height: 90rpx;
	background: url(../../static/images/wish/yaoshi.png) no-repeat;
	background-size: 100% 100%;
}
.myTag{
	width: 88rpx;
	height: 110rpx;
}

.tagOut{
	width: 360rpx;
	height: 200rpx;
	position: absolute;
	top: 100px;
	left: 100px;
	/* background: url(../../static/images/wish/bg.png) no-repeat; */
	background-size: 360rpx 200rpx;
	z-index: 999;
}
.userRow{
	margin-top: 15rpx;
	font-size: 24rpx;
	display: flex;
	justify-content: flex-start;
	align-items: center;
}
.avatar{
	width: 42rpx;
	height: 42rpx;
	border-radius: 50%;
	margin-left: 28rpx;
	margin-right: 10rpx;
}
.sexIcon{
	width: 17rpx;
	height: 20rpx;
	margin-left: 10rpx;
}
.jiesuo{
	margin-top: 20rpx;
	font-size: 22rpx;
	display: flex;
	justify-content: flex-start;
	align-items: flex-start;
	color: #666666;
}
.yaosi{
	width: 24rpx;
	height: 22rpx;
	margin-left: 20rpx;
	margin-right: 6rpx;
}
.jieRouk{
	width: 74rpx;
	height: 34rpx;
	background: #FA9700;
	color: #FFFFFF;
	border-radius: 17rpx;
	font-size: 24rpx;
	text-align: center;
	line-height: 34rpx;
	margin-left: 46rpx;
}
.gn{
	display: flex;
	justify-content: flex-start;
	align-items: center;
	margin-top: 16rpx;
	color: #FA9700;
	font-size: 22rpx;
}
.gnIn{
	width: 50%;
	text-align: center;
}
</style>
